<script setup lang="ts">
import FolderPickerInput from "@/components/framework/folder-picker-input.vue";
import { onMounted, reactive, toRaw } from "vue";
import { LoadingOutlined, QuestionCircleOutlined } from "@ant-design/icons-vue";
import { type NodejsConfig, type NpmConfig, useNodejsStore } from "@/pages/tools/nodejs/nodejs-store";
import { electronBuilderBinariesMirrorList, electronMirrorList, npmRegistryList, pythonMirrorList } from "@/pages/tools/nodejs/mirror/nodejs-mirror";
import { message } from "ant-design-vue";
import { openSystemPropertiesAdvanced } from "@/framework/util/cp";

const nodejsStore = useNodejsStore();

const nodeConfigForm = reactive<NodejsConfig>({
  downloadMirror: "npmmirror",
  localSavePath: "",
  currentVersionPath: "",
  ltsVersions: "",
});
const npmConfigForm = reactive<NpmConfig>({
  registry: "",
  electronMirror: "",
  electronBuilderBinariesMirror: "",
  pythonMirror: "",
});

onMounted(() => {
  Object.assign(nodeConfigForm, nodejsStore.nodeConfig);
  Object.assign(npmConfigForm, nodejsStore.npmConfig);
  nodejsStore.loadNpmConfig();
});

const saveNodeConfig = () => nodejsStore.setNodeConfig(toRaw(nodeConfigForm));
const openSystemEnvConfig = () => openSystemPropertiesAdvanced();

const saveNpmConfig = async () => {
  nodejsStore.setNpmConfig(toRaw(npmConfigForm));
  await nodejsStore.saveNpmConfig();
  message.success("保存成功");
};
</script>

<template>
  <div class="full-view overflow-auto flex-auto aic">
    <a-form class="w-1000" :label-col="{ span: 8 }">
      <div class="mv-20">node</div>
      <a-divider />
      <div class="w-800 mh-auto">
        <a-form-item label="安装源">
          <a-select v-model:value="nodeConfigForm.downloadMirror">
            <a-select-option value="npmmirror">npmmirror.com</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="本地保存路径">
          <folder-picker-input v-model:value="nodeConfigForm.localSavePath" />
        </a-form-item>
        <a-form-item label="当前使用版本安装路径">
          <folder-picker-input v-model:value="nodeConfigForm.currentVersionPath" />
        </a-form-item>
        <a-form-item label="LTS版本">
          <a-input v-model:value="nodeConfigForm.ltsVersions" />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 8 }">
          <a-space>
            <a-button type="primary" @click="saveNodeConfig">保存</a-button>
            <a-button @click="openSystemEnvConfig">系统环境变量配置</a-button>
          </a-space>
        </a-form-item>
      </div>

      <div class="mv-20 flex aic">
        <span>npm</span>
        <LoadingOutlined v-if="nodejsStore.npmConfigLoading" class="ml-10" />
      </div>
      <a-divider />
      <div class="w-800 mh-auto">
        <a-form-item label="registry">
          <a-auto-complete v-model:value="npmConfigForm.registry" :options="npmRegistryList" spellcheck="false" />
        </a-form-item>
        <a-form-item>
          <template #label>
            <div>
              <span class="mr-3">electron_mirror</span>
              <a-tooltip title="Electron二进制包下载加速镜像地址" :mouse-leave-delay="0" placement="left">
                <QuestionCircleOutlined />
              </a-tooltip>
            </div>
          </template>
          <a-auto-complete v-model:value="npmConfigForm.electronMirror" :options="electronMirrorList" spellcheck="false" />
        </a-form-item>
        <a-form-item>
          <template #label>
            <div>
              <span class="mr-3">electron_builder_binaries_mirror</span>
              <a-tooltip title="Electron构建工具下载加速镜像地址" :mouse-leave-delay="0" placement="left">
                <QuestionCircleOutlined />
              </a-tooltip>
            </div>
          </template>
          <a-auto-complete
            v-model:value="npmConfigForm.electronBuilderBinariesMirror"
            :options="electronBuilderBinariesMirrorList"
            spellcheck="false"
          />
        </a-form-item>
        <a-form-item>
          <template #label>
            <div>
              <span class="mr-3">python_mirror</span>
              <a-tooltip title="Python下载加速镜像地址" :mouse-leave-delay="0" placement="left">
                <QuestionCircleOutlined />
              </a-tooltip>
            </div>
          </template>
          <a-auto-complete v-model:value="npmConfigForm.pythonMirror" :options="pythonMirrorList" spellcheck="false" />
        </a-form-item>
      </div>
      <a-divider />
      <div class="w-800 mh-auto">
        <a-form-item :wrapper-col="{ offset: 8 }">
          <a-space>
            <a-button type="primary" @click="saveNpmConfig">保存</a-button>
            <a-button @click="nodejsStore.openNpmrcConfigFile">编辑.npmrc配置文件</a-button>
          </a-space>
        </a-form-item>
      </div>
    </a-form>
  </div>
</template>

<style scoped lang="less"></style>
